﻿角色列表页
@*添加按钮*@
<div>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRole">添加 </button>
</div>

@*表格*@
<table id="table" class="table">
    <thead>
        <tr>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>


@*添加对话框*@
<div class="modal fade" id="addRole" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">添加角色</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">角色名称:</label>
                        <input type="text" class="form-control" id="roleName">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="submitAdd">保存</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

@*编辑对话框*@
<div class="modal fade" id="editRole" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">编辑角色</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">角色id:</label>
                        <input type="text" class="form-control" id="newRoleId">
                    </div>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">角色名称:</label>
                        <input type="text" class="form-control" id="newRoleName">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="submitEdit">保存</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

@*确定删除对话框*@
<div class="modal fade" id="sureDel" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">删除角色</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确认删除吗?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="submitDel">确定</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


@section Scripts{
    <script>

        loadpage()
        let g_rows
        
        function loadpage()
        {
            let s = sessionStorage.getItem('rolelist')
            if (s == [] || s == "" || s == null) {
                $.ajax({
                    url: '/Role/GetRoleList',
                    type: 'get',
                    success: function (data) {
                        parseData(data)
                    },
                    error: function (err) {
                    }
                })
            } else {
                parseStorage(s)
            }
        }

        
        //解析ajax请求返回数据并加载到表格
        function parseData(data) {
            $('#table thead tr').empty()
            $('#table tbody tr').empty()
            let jsd = JSON.stringify(data)

            let head = JSON.parse(data.attr)
            head.push('操作')
            sessionStorage.setItem('rolelist_head',JSON.stringify(head))

            //渲染表头
            for (index in head) {
                $('#table thead tr').append('<th>' + head[index] + '</th>')
            }

            let rows = JSON.parse(data.row)
            g_rows=rows
            sessionStorage.setItem('rolelist',JSON.stringify(rows))

            //渲染表格
            $(rows).each(function (index, ele) {
                $('#table tbody').append('<tr></tr>')
                for (key in ele) {
                    $('#table tbody tr:last').append('<td>' + ele[key] + '</>')
                }
                $('#table tbody tr:last').append('<td>' +
                    '<button class="editBtn" onclick="edit(this)" data-bs-toggle="modal" data-bs-target="#editRole">编辑</button>' +
                    '<button class="delBtn" onclick="del(this)" data-bs-toggle="modal" data-bs-target="#sureDel">删除</button>' +
                    '</td>')
                $('#table tbody tr td:last').attr({ 'RoleId': ele.RoleId })
            })
            $('.delBtn').addClass("btn btn-danger btn-sm")
            $('.editBtn').addClass("btn btn-primary btn-sm")
        }

        

        //解析缓存并加载到表格
        function parseStorage(data) {
            $('#table thead tr').empty()
            $('#table tbody tr').empty()
            let headStorage=sessionStorage.getItem('rolelist_head')
            let head=JSON.parse(headStorage)
            //渲染表头
            for (index in head) {
                $('#table thead tr').append('<th>' + head[index] + '</th>')
            }
            
            //渲染表格
            let rows = JSON.parse(data)
            $(rows).each(function (index, ele) {
                $('#table tbody').append('<tr></tr>')
                for (key in ele) {
                    $('#table tbody tr:last').append('<td>' + ele[key] + '</>')
                }
                $('#table tbody tr:last').append('<td>'+
                    '<button class="editBtn" data-bs-toggle="modal" data-bs-target="#editRole">编辑</button>' +
                    '<button class="delBtn" data-bs-toggle="modal" data-bs-target="#sureDel">删除</button>' +
                '</td>')

            })
            $('.delBtn').addClass("btn btn-danger btn-sm")
            $('.editBtn').addClass("btn btn-primary btn-sm")
        }

        
        //添加对话框“保存”按钮响应事件
        $('#submitAdd').click(function () {
            if ($('#roleName').val() == '' || $('#roleName').val() == null)
                return

            $.ajax({
                url: '/Role/AddRole',
                type: "post",
                data: {
                    RoleName: $('#roleName').val()
                },
                dataType: 'json',
                success: function (data) {
                    if (data == 0 || data == '0') {
                        alert("已存在")
                        return
                    }
                    if (data == 1 || data == '1') {
                        refreshData()
                    }
                }
            })
        })

        //刷新数据
        function refreshData()
        {
            $('#table thead tr').empty()
            $('#table tbody tr').empty()
            $.ajax({
                url: '/Role/GetRoleList',
                type: 'get',
                success: function (data) {
                    parseData(data)
                },
                error: function (err) {
                }
            })
        }

        
        //编辑对话框中的“保存”按钮点击事件响应
        $('#submitEdit').click(function(index){
            let roleId=$('#newRoleId').val()
            let roleName=$('#newRoleName').val()
            if(roleName==''||roleName==null){
                //提示名称不能为空

                return
            }

            $.ajax({
                url: '/Role/EditRole',
                type:'post',
                data:{
                    RoleId:roleId,
                    RoleName:roleName
                },
                success:function(data){
                    if(data==1){
                           alert("修改成功")
                    }
                    else if(data==0){
                        alert('名称已存在!')
                    }
                    //刷新表格
                    refreshData()
                    //关闭对话框
                    // ...
                },
                error:{
                    
                }
            })
        })

        //第一次加载页面--“编辑”按钮响应事件
        function edit(e)
        {
            let roleId=$(e).parent().attr('RoleId')
            let role=g_rows.filter(function(r){
                return r.RoleId==roleId
            })
            $('#newRoleId').val(role[0].RoleId)
            $('#newRoleId').attr({ 'disabled': 'disabled' })
            $('#newRoleName').val(role[0].RoleName)
        }

        //使用缓存--“编辑”按钮响应事件
        $('.editBtn').each(function(index){
            $(this).click(function(){
                let rows=JSON.parse(sessionStorage.getItem('rolelist'))
                let role=rows.filter(function(r,ind){
                    return index==ind
                })
                //console.log(role)
                $('#newRoleId').val(role[0].RoleId)
                $('#newRoleId').attr({ 'disabled': 'disabled' })
                $('#newRoleName').val(role[0].RoleName)
            })
        })

        //第一次加载页面--"删除"按钮响应事件
        let roleId
        function del(e)
        {
            roleId = $(e).parent().attr('RoleId')
        }


        //缓存的数据--"删除"按钮点击事件响应
        $('.delBtn').each(function (index) {
            $(this).click(function () {
                let stor = sessionStorage.getItem('rolelist')

                let rows = JSON.parse(stor)
                let tr = $(rows).filter(function (ind, ele) {
                    return ind == index
                })
                roleId = tr[0].RoleId
            })
        })

        //"删除"对话框--"确定"按钮响应事件
        $('#submitDel').click(function(){
            let delId=roleId;
            if(roleId<=0){
                return
            }
             
            $.ajax({
                url: '/Role/DelRole',
                type: 'post',
                data: {
                    RoleId: roleId
                },
                success: function (data) {
                    if (data == 1) {
                        alert("删除成功")
                    }
                    else {
                        alert('删除失败!')
                    }
                    //刷新表格
                    refreshData()
                    //关闭对话框
                    // ...
                },
                error: {

                }
            })
        })
    </script>
}